<template>
    <div style="display: flex;justify-content: space-evenly;align-items: center;">
        <div class="box">
            <div class="circle">
                <i class="el-icon-document"></i>
            </div>
            <div>
                <p>文章</p>
                <h2>{{ dashList.articleTotalCount }}</h2>
            </div>

        </div>
        <div class="box">
            <div class="circle">
                <i class="el-icon-document"></i>
            </div>
            <div>
                <p>分类</p>
                <h2>{{ dashList.categoryTotalCount }}</h2>
            </div>

        </div>
        <div class="box">
            <div class="circle">
                <i class="el-icon-document"></i>
            </div>
            <div>
                <p>标签</p>
                <h2>{{ dashList.pvTotalCount }}</h2>
            </div>

        </div>
        <div class="box">
            <div class="circle">
                <i class="el-icon-document"></i>
            </div>
            <div>
                <p>总浏览量</p>
                <h2>{{ dashList.tagTotalCount }}</h2>
            </div>

        </div>
    </div>
</template>

<script>
export default {
    created() {
        this.getDash()
    },
    data() {
        return {
            dashList: {}
        }
    },
    methods: {
        getDash() {
            this.$axios.post('/api/admin/dashboard/article/statistics')
                .then((res) => {
                    if (res.data.success) {
                        this.dashList = res.data.data;
                        console.log(this.dashList);
                    } else {
                        this.$message.error('获取仪表盘数据失败');
                    }
                })
                .catch((err) => {
                    console.error('请求错误:', err);
                    this.$message.error('获取数据失败，请重新尝试');
                });
        }
    }
}


// const dashboardRequest = axios.create({
//     baseURL: 'http://47.104.167.34:9110/api/admin',
//     timeout: 5000,
//     headers: { 'Content-Type': 'application/json' }
// })
// // 获取不到

// dashboardRequest.interceptors.request.use(
//     config => {
//         const adminToken = localStorage.getItem('adminToken')
//         if (adminToken) {
//             config.headers.Authorization = `Bearer ${adminToken}`
//         }
//         return config
//     },
//     error => {
//         console.error('仪表盘请求初始化失败：', error.message)
//         return Promise.reject(error)
//     }
// )

// dashboardRequest.interceptors.response.use(
//     response => response.data,
//     error => {
//         const errorMsg = error.response?.data?.msg || '仪表盘数据请求失败，请重试'
//         console.error('仪表盘接口错误：', errorMsg, error.response?.data || error)
//         return Promise.reject(error)
//     }
// )

// export const getDashboardData = async () => {
//     try {
//         const responseData = await dashboardRequest.post('/dashboard/article/statistics')
//         return responseData
//     } catch (error) {
//         console.error('获取仪表盘数据失败：', error)
//         throw error
//     }
// }
</script>

<style>
.box {
    width: 140px;
    height: 50px;
    background-color: white;
    color: gray;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    padding: 30px;
}

h2 {
    color: black;
}

.circle {
    margin-right: 5px;
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background-color: #f3f4f6;
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>